<template>
  <div class="merit-transfer">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>功德转移系统</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">功德转移系统</div>
        <div class="page-subtitle">管理功德来源、转移规则和使用记录</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="newTransfer">
          <SwapOutlined />
          新建转移
        </a-button>
        <a-button @click="viewRules">
          <SettingOutlined />
          规则设置
        </a-button>
      </div>
    </div>

    <!-- 功德池总览 -->
    <div class="merit-pool-overview">
      <a-row :gutter="[20, 20]">
        <a-col :xs="24" :sm="12" :lg="8">
          <div class="pool-card total-pool">
            <div class="pool-icon">
              <CrownOutlined />
            </div>
            <div class="pool-content">
              <div class="pool-value">{{ poolStats.totalPool.toLocaleString() }}</div>
              <div class="pool-label">功德池总额</div>
              <div class="pool-change">
                <span class="change-text">今日增长</span>
                <span class="change-value positive">+{{ poolStats.todayIncrease.toLocaleString() }}</span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="8">
          <div class="pool-card available-pool">
            <div class="pool-icon">
              <CheckCircleOutlined />
            </div>
            <div class="pool-content">
              <div class="pool-value">{{ poolStats.availablePool.toLocaleString() }}</div>
              <div class="pool-label">可转移功德</div>
              <div class="pool-change">
                <span class="change-text">使用率</span>
                <span class="change-value">{{ poolStats.usageRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="8">
          <div class="pool-card locked-pool">
            <div class="pool-icon">
              <LockOutlined />
            </div>
            <div class="pool-content">
              <div class="pool-value">{{ poolStats.lockedPool.toLocaleString() }}</div>
              <div class="pool-label">冻结功德</div>
              <div class="pool-change">
                <span class="change-text">冻结率</span>
                <span class="change-value warning">{{ poolStats.lockedRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 转移统计 -->
    <div class="transfer-stats">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ArrowUpOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ transferStats.todayTransfers }}</div>
              <div class="stat-label">今日转移</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ transferStats.pendingTransfers }}</div>
              <div class="stat-label">待处理</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ transferStats.activeUsers }}</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ transferStats.successRate }}%</div>
              <div class="stat-label">成功率</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块 -->
    <div class="modules-section">
      <a-row :gutter="[24, 24]">
        <!-- 功德来源管理 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card source-management" @click="navigateToSubModule('source')">
            <div class="module-header">
              <div class="module-icon">
                <GoldOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">功德来源管理</div>
                <div class="module-description">管理功德的来源渠道，包括善行、布施、功德主等</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">活跃来源：</span>
                <span class="value">{{ moduleData.source.activeSources }}</span>
              </div>
              <div class="stat-item">
                <span class="label">今日收入：</span>
                <span class="value">+{{ moduleData.source.todayIncome.toLocaleString() }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 转移规则管理 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card rules-management" @click="navigateToSubModule('rules')">
            <div class="module-header">
              <div class="module-icon">
                <SettingOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">功德转移规则</div>
                <div class="module-description">设置和管理功德转移的规则、限制和手续费</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">活跃规则：</span>
                <span class="value">{{ moduleData.rules.activeRules }}</span>
              </div>
              <div class="stat-item">
                <span class="label">手续费率：</span>
                <span class="value">{{ moduleData.rules.feeRate }}%</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 使用记录管理 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card usage-records" @click="navigateToSubModule('records')">
            <div class="module-header">
              <div class="module-icon">
                <HistoryOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">功德使用记录</div>
                <div class="module-description">查看和管理功德的使用记录和转移历史</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">今日记录：</span>
                <span class="value">{{ moduleData.records.todayRecords }}</span>
              </div>
              <div class="stat-item">
                <span class="label">总记录数：</span>
                <span class="value">{{ moduleData.records.totalRecords.toLocaleString() }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 功德余额查询 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card balance-query" @click="navigateToSubModule('balance')">
            <div class="module-header">
              <div class="module-icon">
                <SearchOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">功德余额查询</div>
                <div class="module-description">查询个人和家族的功德余额及明细</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">活跃账户：</span>
                <span class="value">{{ moduleData.balance.activeAccounts.toLocaleString() }}</span>
              </div>
              <div class="stat-item">
                <span class="label">查询次数：</span>
                <span class="value">{{ moduleData.balance.todayQueries }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入查询
              </a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 最近转移和快速操作 -->
    <a-row :gutter="[24, 24]" style="margin-top: 32px">
      <!-- 最近转移记录 -->
      <a-col :xs="24" :lg="16">
        <div class="section-card">
          <div class="section-header">
            <h3 class="section-title">
              <SwapOutlined />
              最近转移记录
            </h3>
            <a-button type="link" @click="viewAllTransfers">查看全部</a-button>
          </div>
          <div class="transfers-list">
            <div v-for="transfer in recentTransfers" :key="transfer.id" class="transfer-item">
              <div class="transfer-info">
                <div class="transfer-title">{{ transfer.fromUser }} → {{ transfer.toUser }}</div>
                <div class="transfer-details">
                  <span class="detail-item">金额：{{ transfer.amount.toLocaleString() }}功德</span>
                  <span class="detail-item">时间：{{ transfer.time }}</span>
                  <span class="detail-item">类型：{{ transfer.type }}</span>
                </div>
              </div>
              <div class="transfer-status">
                <a-tag :color="getTransferStatusColor(transfer.status)">{{ transfer.status }}</a-tag>
              </div>
              <div class="transfer-actions">
                <a-button type="text" size="small" @click="viewTransferDetail(transfer.id)"> 查看详情 </a-button>
              </div>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 快速操作 -->
      <a-col :xs="24" :lg="8">
        <div class="section-card">
          <div class="section-header">
            <h3 class="section-title">
              <ThunderboltOutlined />
              快速操作
            </h3>
          </div>
          <div class="quick-actions">
            <div class="action-item" @click="quickAction('balance')">
              <div class="action-icon balance">
                <DollarOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">余额查询</div>
                <div class="action-desc">快速查询功德余额</div>
              </div>
            </div>
            <div class="action-item" @click="quickAction('transfer')">
              <div class="action-icon transfer">
                <SwapOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">快速转移</div>
                <div class="action-desc">执行功德转移</div>
              </div>
            </div>
            <div class="action-item" @click="quickAction('statistics')">
              <div class="action-icon statistics">
                <BarChartOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">统计报告</div>
                <div class="action-desc">生成转移统计</div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  SwapOutlined,
  SettingOutlined,
  CrownOutlined,
  CheckCircleOutlined,
  LockOutlined,
  ArrowUpOutlined,
  ClockCircleOutlined,
  UserOutlined,
  TrophyOutlined,
  GoldOutlined,
  ArrowRightOutlined,
  HistoryOutlined,
  SearchOutlined,
  ThunderboltOutlined,
  DollarOutlined,
  BarChartOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 功德池统计
const poolStats = ref({
  totalPool: 1586420,
  availablePool: 1234567,
  lockedPool: 351853,
  todayIncrease: 23456,
  usageRate: 77.8,
  lockedRate: 22.2
})

// 转移统计
const transferStats = ref({
  todayTransfers: 23,
  pendingTransfers: 8,
  activeUsers: 156,
  successRate: 96.7
})

// 模块数据
const moduleData = ref({
  source: {
    activeSources: 15,
    todayIncome: 23456
  },
  rules: {
    activeRules: 8,
    feeRate: 2.5
  },
  records: {
    todayRecords: 23,
    totalRecords: 8756
  },
  balance: {
    activeAccounts: 2345,
    todayQueries: 89
  }
})

// 最近转移记录
const recentTransfers = ref([
  {
    id: 1,
    fromUser: '李善人',
    toUser: '王某某',
    amount: 5000,
    time: '14:30',
    type: '超度转移',
    status: '已完成'
  },
  {
    id: 2,
    fromUser: '张功德主',
    toUser: '陈某某',
    amount: 3000,
    time: '13:45',
    type: '家族转移',
    status: '处理中'
  },
  {
    id: 3,
    fromUser: '刘居士',
    toUser: '孙某某',
    amount: 8000,
    time: '12:20',
    type: '布施转移',
    status: '已完成'
  },
  {
    id: 4,
    fromUser: '赵善心',
    toUser: '周某某',
    amount: 2500,
    time: '11:15',
    type: '救赎转移',
    status: '审核中'
  },
  {
    id: 5,
    fromUser: '钱大德',
    toUser: '吴某某',
    amount: 6000,
    time: '10:30',
    type: '紧急转移',
    status: '已完成'
  }
])

// 导航到子模块
const navigateToSubModule = (module) => {
  switch (module) {
    case 'source':
      router.push('/salvation/merit-transfer/source')
      break
    case 'rules':
      router.push('/salvation/merit-transfer/rules')
      break
    case 'records':
      router.push('/salvation/merit-transfer/records')
      break
    case 'balance':
      router.push('/salvation/merit-transfer/balance')
      break
  }
}

// 新建转移
const newTransfer = () => {
  router.push('/salvation/merit-transfer/new')
}

// 查看规则
const viewRules = () => {
  router.push('/salvation/merit-transfer/rules')
}

// 查看所有转移
const viewAllTransfers = () => {
  router.push('/salvation/merit-transfer/list')
}

// 查看转移详情
const viewTransferDetail = (id) => {
  router.push(`/salvation/merit-transfer/detail/${id}`)
}

// 快速操作
const quickAction = (action) => {
  switch (action) {
    case 'balance':
      router.push('/salvation/merit-transfer/balance')
      break
    case 'transfer':
      router.push('/salvation/merit-transfer/new')
      break
    case 'statistics':
      router.push('/salvation/merit-transfer/statistics')
      break
  }
}

// 获取转移状态颜色
const getTransferStatusColor = (status) => {
  const colors = {
    已完成: 'success',
    处理中: 'processing',
    审核中: 'warning',
    已拒绝: 'error'
  }
  return colors[status] || 'default'
}

onMounted(() => {
  console.log('功德转移系统页面已加载')
})
</script>

<style lang="scss" scoped>
.merit-transfer {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;

      .ant-btn {
        height: 40px;
        padding: 0 20px;
      }
    }
  }

  // 功德池总览
  .merit-pool-overview {
    margin-bottom: 32px;

    .pool-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: all 0.3s ease;

      .pool-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        background: rgba(255, 255, 255, 0.1);
      }

      .pool-content {
        flex: 1;

        .pool-value {
          font-size: 2.2rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 8px;
        }

        .pool-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 1rem;
          margin-bottom: 8px;
        }

        .pool-change {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.9rem;

          .change-text {
            color: rgba(255, 255, 255, 0.7);
          }

          .change-value {
            font-weight: bold;

            &.positive {
              color: #4caf50;
            }

            &.warning {
              color: #ff9800;
            }
          }
        }
      }

      &.total-pool .pool-icon {
        color: #ffd700;
      }
      &.available-pool .pool-icon {
        color: #4caf50;
      }
      &.locked-pool .pool-icon {
        color: #f44336;
      }
    }
  }

  // 转移统计
  .transfer-stats {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 45px;
        height: 45px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }

      .stat-content {
        .stat-value {
          font-size: 1.5rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.85rem;
        }
      }
    }
  }

  // 功能模块
  .modules-section {
    margin-bottom: 32px;

    .module-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;

        .module-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.8rem;
          background: rgba(255, 255, 255, 0.1);
        }

        .module-info {
          flex: 1;

          .module-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #fff;
            margin-bottom: 8px;
          }

          .module-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            line-height: 1.4;
          }
        }
      }

      .module-stats {
        margin-bottom: 20px;

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 0.9rem;

          .label {
            color: rgba(255, 255, 255, 0.7);
          }

          .value {
            color: #ffd700;
            font-weight: bold;
          }
        }
      }

      .module-actions {
        text-align: right;
      }

      // 不同模块的图标颜色
      &.source-management .module-icon {
        color: #ffd700;
      }
      &.rules-management .module-icon {
        color: #2196f3;
      }
      &.usage-records .module-icon {
        color: #9c27b0;
      }
      &.balance-query .module-icon {
        color: #4caf50;
      }
    }
  }

  // 通用卡片样式
  .section-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    height: 100%;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 1.2rem;
        color: #fff;

        .anticon {
          color: #ffd700;
        }
      }
    }
  }

  // 转移列表
  .transfers-list {
    .transfer-item {
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .transfer-info {
        flex: 1;

        .transfer-title {
          font-weight: bold;
          color: #fff;
          font-size: 1rem;
          margin-bottom: 4px;
        }

        .transfer-details {
          display: flex;
          gap: 16px;
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.7);

          .detail-item {
            &:not(:last-child) {
              position: relative;

              &::after {
                content: '|';
                position: absolute;
                right: -8px;
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
        }
      }

      .transfer-status {
        margin: 0 16px;
      }

      .transfer-actions {
        .ant-btn {
          color: #ffd700;

          &:hover {
            color: #fff;
            background: rgba(255, 215, 0, 0.2);
          }
        }
      }
    }
  }

  // 快速操作
  .quick-actions {
    .action-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 12px;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .action-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;

        &.balance {
          background: rgba(76, 175, 80, 0.2);
          color: #4caf50;
        }

        &.transfer {
          background: rgba(255, 215, 0, 0.2);
          color: #ffd700;
        }

        &.statistics {
          background: rgba(33, 150, 243, 0.2);
          color: #2196f3;
        }
      }

      .action-content {
        .action-title {
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .action-desc {
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .merit-transfer {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }

      .header-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }

    .pool-card {
      flex-direction: column;
      text-align: center;
      gap: 16px;

      .pool-content .pool-value {
        font-size: 1.8rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.3rem;
      }
    }

    .module-card .module-header {
      flex-direction: column;
      text-align: center;
      gap: 12px;
    }
  }
}
</style>
